<template>
	<div id="app">
		<div>
			<span>商品配置 > 三级类管理 </span>
			<el-button type="success" size="mini" @click="shauxin">刷新</el-button>
		</div>
		<!-- 页面顶部 -->
		<div style="margin-left: 15%">
			<div>
				<!-- 模糊查询输入框 -->
				<span style="font-size: 13px;">***模糊查询：</span>
				<el-input style="display: inline-block; width: 200px;" placeholder="请输入类型名称进行查询" size="mini"
					v-model="loadSmallerParam.keyword"></el-input>
				<!-- 模糊查询按钮 -->
				<el-button style="margin-left: 10px;" type="primary" size="mini" @click="findByKeyword">查询</el-button>
				<!-- 新增按钮 -->
				<el-button type="primary" size="mini" style="margin-left:400px" @click="addButton">新增</el-button>
				<!-- 删除按钮 -->
				<el-button type="danger" size="mini" style="margin-left:10px" @click="deleteButton">删除</el-button>
			</div>
			<!-- 小类信息展示表 -->
			<el-table style="width: 100%; " :data="PageGoodsSmallerDto.goodsSmallerDtos" @selection-change="CheckedIds">
				<el-table-column type="selection" label="序号"></el-table-column>
				<el-table-column prop="goodsSmallerId" label="类编号"></el-table-column>
				<el-table-column prop="goodsSmallerName" label="类名称"></el-table-column>
				<el-table-column prop="goodsSmallName" label="上级类名"></el-table-column>
				<el-table-column prop="goodsSmallerUnit" label="单位"></el-table-column>
				<el-table-column prop="goodsSmallerLeave" label="级别"></el-table-column>
				<!-- 展示表的最后一列是修改操作 -->
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="updateButton(scope.row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 页码 -->
			<div style="margin: auto;">
				<template>
					<div class="block">
						<span class="demonstration"></span>
						<el-pagination @current-change="CurrentChange" :total="PageGoodsSmallerDto.total"
							:page-size="loadSmallerParam.pageSize" layout="total, prev, pager, next">
						</el-pagination>
					</div>
				</template>
			</div>
		</div>
		<!-- 修改信息的弹窗 -->
		<el-dialog title="请输入需要更改的内容" :visible.sync="updateVisible">
			<el-form ref="form" label-width="120px">
				<el-form-item label="三级类编号">
					<el-input style="display: inline-block; width: 200px;" size="mini"
						v-model="UpdateGoodsSmallerParam.goodsSmallerId"></el-input>
				</el-form-item>
				<el-form-item label="三级类名称">
					<el-input style="display: inline-block; width: 200px;" size="mini"
						v-model="UpdateGoodsSmallerParam.goodsSmallerName"></el-input>
				</el-form-item>
				<el-form-item label="上级类编号">
					<el-input disabled style="display: inline-block; width: 200px;" size="mini"
						v-model="UpdateGoodsSmallerParam.goodsSmallId"></el-input>
				</el-form-item>
				<el-form-item label="上级类名">
					<el-input disabled style="display: inline-block; width: 200px;" size="mini"
						v-model="UpdateGoodsSmallerParam.goodsSmallName"></el-input>
				</el-form-item>
				<el-form-item label="描述：">
					<el-input style="display: inline-block; width: 200px;" size="mini"
						v-model="UpdateGoodsSmallerParam.goodsSmallerDescribe"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="beSureUpdate">确定修改</el-button>
				<el-button type="danger" @click="quxiao">取 消</el-button>
			</span>
		</el-dialog>
		<!-- 新增 小类信息的弹窗-->
		<el-dialog title="新增三级类信息" width="50%" :visible.sync="addVisible" @close="addclose">
			<el-form ref="form" label-width="120px">
				<el-form-item label="三级类名称：">
					<el-input style="display: inline-block; width: 200px;" size="mini"
						v-model="addGSmallerParam.goodsSmallerName"></el-input>
				</el-form-item>
				<el-form-item label="选择二级类">
					<el-select v-model="addGSmallerParam.goodsSmallId" placeholder="请选择二级类...">
						<el-option v-for="(item,index) in smallInfos" :label="item.goodsSmallName"
							:value="item.goodsSmallId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="单位：">
					<el-input style="display: inline-block; width: 200px;" size="mini"
						v-model="addGSmallerParam.goodsSmallerUnit"></el-input>
				</el-form-item>
				<el-form-item label="描述：">
					<el-input type="textarea" style="display: inline-block; width: 200px;" size="mini"
						v-model="addGSmallerParam.goodsSmallerDescribe"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="beSureAddSmallerInfo">确认新增</el-button>
				<el-button type="danger" @click="quxiao">取 消</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: "GoodsSmaller",
		data() {
			return {
				smallInfos: [], //接收二级类信息
				loadSmallerParam: { // 分页查询的参数
					indexPage: 1,
					pageSize: 3,
					keyword: null
				},
				PageGoodsSmallerDto: { //接收后端分页查询的结果
					goodsSmallerDtos: null,
					indexPage: null,
					total: null
				},
				UpdateGoodsSmallerParam: { //修改操作的参数
					goodsSmallerId: null,
					goodsSmallerName: null,
					goodsSmallId: null,
					goodsSmallName: null,
					goodsSmallerLeave: null,
					goodsSmallerUnit: null
				},
				//批量删除操作的参数
				DeleteParam: {
					goodsSmallerIds: []
				},
				updateVisible: false,
				//添加小类信息的参数
				addGSmallerParam: {
					goodsSmallerName: null,
					goodsSmallId: null,
					goodsSmallName: null,
					goodsSmallerLeave: null,
					goodsSmallerUnit: null
				},
				addVisible: false //默认新增信息的弹窗关闭
			}
		},
		methods: {
			//取消
			quxiao() {
				this.addVisible = false;
				this.updateVisible = false;
			},
			//刷新
			shauxin() {
				this.loadSmallerParam.keyword = null;
				this.loadSmaller();
			},
			//加载二级类信息
			loadSmallInfo() {
				this.$http.get("/goods-small/listAllSmall").then(resp => {
					if (resp.data.code == 200) {
						this.smallInfos = resp.data.data;
					} else {
						this.$message({
							message: '查询大类失败',
							type: 'warning'
						});
					}
				})
			},
			//加载三级类信息
			loadSmaller(page) {
				if (page != null || page != undefined) {
					this.loadSmallerParam.indexPage = page;
				}
				this.$http.post("/goods-smaller/pageSmallerInfo", this.loadSmallerParam).then(resp => {
					if (resp.data.code == 200) {
						this.PageGoodsSmallerDto.goodsSmallerDtos = resp.data.data.goodsSmallerDtos;
						this.PageGoodsSmallerDto.indexPage = resp.data.data.indexPage;
						this.PageGoodsSmallerDto.total = resp.data.data.total;
					} else {
						this.$message({
							message: '查询小类失败',
							type: 'warning'
						});
					}

				})
			},
			//模糊查询按钮点击事件
			findByKeyword() {
				if (this.loadSmallerParam.keyword == null || this.loadSmallerParam.keyword == "" || this.loadSmallerParam
					.keyword == undefined) {
					this.$message({
						message: "请输入小类名称或三级类名称...",
						type: 'warning'
					});
				} else {
					this.loadSmaller();
				}
			},
			//当前页改变时触发的函数
			CurrentChange(page) {
				this.loadSmaller(page);
			},
			//点击新增按钮打开新增弹信息的窗
			addButton() {
				this.addVisible = true;
				this.addGSmallerParam = {
					goodsSmallerName: null,
					goodsSmallId: null,
					goodsSmallName: null,
					goodsSmallerLeave: null,
					goodsSmallerUnit: null,
				}
			},
			//获取选中的大类id
			CheckedIds(sel) {
				for (let i = 0; i < sel.length; i++) {
					this.DeleteParam.goodsSmallerIds.push(sel[i].goodsSmallerId);
				}
			},
			//删除按钮的点击事件
			deleteButton() {
				if (this.DeleteParam.goodsSmallerIds.length > 0) {
					this.$http.post("/goods-smaller/removeSmallerInfo", this.DeleteParam).then(resp => {
						if (resp.data.code == 200) {
							this.$message({
								message: resp.data.msg,
								type: 'success',
							});
							this.loadSmaller();
						} else {
							this.$message({
								message: '删除失败',
								type: 'warning'
							});
						}
					})
				} else {
					this.$message({
						message: "请先勾选数据！",
						type: 'warning'
					});
				}

			},
			//修改按钮的点击事件 
			updateButton(row) {
				// 打开弹窗，并显示将要修改的信息
				this.UpdateGoodsSmallerParam.goodsSmallerId = row.goodsSmallerId;
				this.UpdateGoodsSmallerParam.goodsSmallerName = row.goodsSmallerName;
				this.UpdateGoodsSmallerParam.goodsSmallId = row.goodsSmallId;
				this.UpdateGoodsSmallerParam.goodsSmallName = row.goodsSmallName;
				this.UpdateGoodsSmallerParam.goodsSmallerUnit = row.goodsSmallerUnit;
				this.UpdateGoodsSmallerParam.goodsSmallerLeave = row.goodsSmallerLeave;
				this.updateVisible = true;
			},
			//确认修改大类信息的请求按钮
			beSureUpdate() {
				this.$http.post("/goods-smaller/updateSmallInfo", this.UpdateGoodsSmallerParam).then(resp => {
					if (resp.data.code == 200) {
						this.$message({
							message: '修改成功',
							type: 'success',
						});
						this.loadSmaller();
					} else {
						this.$message({
							message: '修改失败',
							type: 'warning'
						});
					}
				})
				this.updateVisible = false;
			},
			//添加三级类按钮的请求
			beSureAddSmallerInfo() {
				this.$http.post("/goods-smaller/addSmallerInfo", this.addGSmallerParam).then(resp => {
					if (resp.data.code == 200) {
						this.$message({
							message: '添加成功',
							type: 'success',
						});
						this.loadSmaller();
					} else {
						this.$message({
							message: '添加失败',
							type: 'warning'
						});
					}
				})
				this.addVisible = false;
			}

		},
		created() {
			this.loadSmaller();
			this.loadSmallInfo();
		}
	}
</script>

<style scoped>
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
</style>
